<template>
  <div>
    <mt-header fixed :title="title" class="common-title" style="font-size:0.36rem">
      <!--左边back -->
      <mt-button  icon="back" slot="left" v-if="leftsvg==true" @click.native="back" ></mt-button>

      <mt-button slot="left" v-if="searchsvg==true" @click.native="back">
        <div>dsfjsdfk</div>
      </mt-button>

      <!--左边取消 -->
      <mt-button slot="left" v-if="lefttext==true" style="font-size: 0.3rem" @click.native="canclepublish">{{lefttexts}}</mt-button>

      <!--右边search图标 -->
      <mt-button class="yl-2search search-style" style="padding-right: 0.3rem;font-size: 0.48rem"  slot="right" v-if="rightsvg==true" @click.native="search($event)"></mt-button>

      <!--右边more图标 -->
      <mt-button icon="more" style="padding-right: 0.3rem" slot="right" v-if="rightmoresvg==true" @click.native="more($event)"></mt-button>

      <!--右边收藏按钮-->
      <mt-button class="search-style" :class="collectclass"  style="padding-right: 0.3rem;font-size: 0.48rem"  slot="right" v-if="isrightcollectsvgshow==true" @click.native="collectevent($event)"></mt-button>

      <!--右边编辑按钮-->
      <mt-button class="search-style yl-liuy"   style="padding-right: 0.3rem;font-size: 0.4rem"  slot="right" v-if="isMyReportShow==true" @click.native="$emit('editReport')"></mt-button>

     <!-- 右边添加图标 -->
      <mt-button class="yl-2top-jia addmy" style="font-size: 0.48rem;padding: 0 0.3rem 0 0" slot="right" v-if="addsvg==true" @click.native="add($event)"></mt-button>

     <!--右边发送 -->
      <mt-button slot="right" style="font-size: 0.3rem;padding-right: 0.3rem" v-if="righttext==true" @click.stop="fasong($event,index)">{{righttexts}}</mt-button>

      <!--右边菜单图标 -->
      <mt-button class="yl-list" slot="right" style="font-size: 0.4rem;margin-right:.3rem;" v-if="rightlist==true" @click.native="yllist($event)"></mt-button>

      <!--右边试吃试用 -->
      <mt-button  slot="right" style="font-size: 0.28rem;margin-right:.3rem;" v-if="tryout==true" @click.native="tryoutclick($event)">我想试</mt-button>


    </mt-header>
    <mt-popup v-model="iscancle" class="header-popup">
      <div style="width: 6.2rem;height: 2.4rem;">
        <div class="repout" >
          <span >退出此次编辑？</span>
        </div>
        <div class="rep-bottom">
          <div class="cancle-sep" @click="cancle">取消</div>
          <div class="queding" @click="ok($event)">确定</div>
        </div>
      </div>
    </mt-popup>

  </div>
</template>
<script>
  import { Header as mtHeader } from 'mint-ui'
  import { Button as mtButton, Popup } from 'mint-ui'

  export default{
    data(){
      return{
        iscancle: false,
        collectclass:this.rightcollectsvg==0?'yl-2gz':'yl-2gz-pre',
      }
    },
    watch: {
      rightcollectsvg(val, oldval){
        if (val){
          this.collectclass = 'yl-2gz-pre'
        }else{
          this.collectclass = 'yl-2gz'
        }
      }
    },
    components:{
      mtHeader, mtButton, Popup
    },
    compunted:{

    },
    mounted(){

    },
    props:['leftsvg', 'rightsvg', 'title','lefttext','righttext','righttexts','lefttexts',
      'addsvg','rightmoresvg','searchsvg','index' , 'rightlist',"isrightcollectsvgshow",'rightcollectsvg','isMyReportShow','tryout'],
    methods:{
      back(){
        if(this.$route.name=="paper"){
            this.$emit("paperBack")
        }else{
          this.$router.go(-1)
        }
      },
      add(event){
        this.$emit("adds",{event:event})
      },
      search(event){
        this.$emit("search",{event:event})
      },
      more(event){
        this.$emit("moresvg",{event:event})
      },
      tryoutclick(event){
        this.$emit("tryoutclick",{event:event})
      },
      canclepublish(){
          this.iscancle = true
      },
      ok(event){
        this.iscancle = false;
        this.$emit('save',{event:event})
        this.$router.go(-1)

      },
      cancle(){
        this.iscancle =false;
      },
      fasong(event,index){
        this.$emit("send",{event:event,index:index})
      },
      yllist (event){
        this.$emit("yllist" , {event,event});
      },
      collectevent(event){
        this.$emit("collectevent",{event:event,rightcollectsvg:this.rightcollectsvg});
      }
    }
  }
</script>
<style lang="less" >
 .mint-header{
   padding: 0 0rem 0 0.2rem;
   height: 0.88rem;
   .mint-header-title{
      margin-left:-.15rem;
   }
 }
 .mint-header-title{
   font-weight: bold;
   overflow: visible;
 }

 .mintui{
   font-size: 0.48rem;
   -webkit-text-stroke-width: 0;
 }
 .header-popup{
   border-radius: 0.1rem;
 }
 .search-style{
   font-size: 0.48rem;
 }
  .repout{
    height:1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-size: 0.32rem;
    font-family: "PingFangSC Regular";
    color: #333333;
  }
  .rep-bottom{
    border-top: 1px solid #d1d1d1;
    display: flex;
    color: #fb685b;
    font-size: 0.32rem;
  }
  .cancle-sep{
    border-right: 1px solid #d1d1d1;
    flex: 1;
    height: 0.89rem;
    text-align: center;
    line-height: 0.89rem;
  }
  .queding{
    flex: 1;
    height: 0.89rem;
    text-align: center;
    line-height: 0.89rem;
  }
  .addmy{
    padding: 0 0.4rem;
  }
.rt_h{
  background: #ffffff;
}
</style>

